<template>
  <div ref="scrollContainer" class="scroll-container">
    <el-row :gutter="20">
      <el-col
        v-for="(status, index) in statuses"
        :key="index"
        :span="calculateSpan(statuses.length)"
      >
        <el-card style="width: 220px ">
          <div class="status-info">
            <div>
              <span class="label">操作者：</span>
              <span>{{ status.operator }}</span>
            </div>
            <div>
              <span class="label">下载状态：</span>
              <el-tag :type="getStatusType(status.downloadStatus)">
                {{ status.downloadStatus }}
              </el-tag>
            </div>
            <div>
              <span class="label">下载中车型车号：</span>
              <span>{{ status.downloadingModel }}</span>
            </div>
            <div>
              <span class="label">下载进度：</span>
              <el-progress
                :percentage="status.downloadProgress"
                :status="getProgressStatus(status.downloadProgress)"
                :stroke-width="16"
                text-inside
              />
            </div>
            <div>
              <span class="label">转储中车型车号：</span>
              <span>{{ status.dumpingModel }}</span>
            </div>
            <div>
              <span class="label">转储状态：</span>
              <el-tag :type="getStatusType(status.dumpingStatus)">
                {{ status.dumpingStatus }}
              </el-tag>
            </div>
            <div>
              <span class="label">转储进度：</span>
              <el-progress
                :percentage="status.dumpingProgress"
                :status="getProgressStatus(status.dumpingProgress)"
                :stroke-width="16"
                text-inside
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    statuses: {
      type: Array,
      required: true
    }
  },
  methods: {
    calculateSpan(length) {
      const maxColumnsPerRow = 6
      console.log('length', length)
      const result = 24 / Math.min(length, maxColumnsPerRow)
      console.log('result', result)
      return result
    },
    getStatusType(status) {
      const statusMap = {
        '下载中': 'primary',
        '已完成': 'success',
        '转储中': 'warning',
        '失败': 'danger'
      }
      return statusMap[status] || ''
    },
    getProgressStatus(progress) {
      return progress === 100 ? 'success' : ''
    }
  }
}
</script>

<style scoped>
.scroll-container {
  max-height: 500px; /* 调整最大高度 */
  overflow-y: auto;
  padding: 10px; /* 添加内边距 */
}

.box-card {
  margin-bottom: 20px;
  border-radius: 8px; /* 调整圆角大小 */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s; /* 添加阴影过渡效果 */
}

.card-header {
  font-size: 18px; /* 调整字体大小 */
  color: #409eff; /* 调整字体颜色 */
}

.status-info {
  font-size: 12px;
  color: #606266;
}

.status-info .label {
  font-weight: 600;
  margin-right: 10px;
}

.status-info div {
  margin-bottom: 14px;
}

.el-progress {
  margin-top: 8px;
}

.box-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}
</style>
